<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/>
    <link rel="stylesheet" href="../../css/pop-ups.css"/>

    <title>股票详情</title>
    <style>
        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 10;
        }

        .stock-detail-head {
            height: 10.5rem;
            width: 7.5rem;
        }

        .stock-detail-img {
            min-height: 10.5rem;
        }

        .stock-detail-img img {
            width: 100%;
            height: 10.5rem;
            filter: blur(20px);
        }

        .stock-detail-jrgs {
            top: 3.54rem;
            left: 2.18rem;
            z-index: 9
        }

        .stock-detail-center {
            width: 5.44rem;
            color: #FFFFFF
        }

        .stock-detail-sum {
            background-color: #F9FBFA;
            padding: 0.44rem 0.62rem 0.58rem 0.62rem;
        }

        .stock-detail-icon {
            height: 0.38rem;
            width: 0.7rem;
        }

        .stock-detail-sum-line {
            width: 36px;
            top: -0.15rem;
            height: 10px;
            background: linear-gradient(90deg, rgba(44, 104, 255, 1) 0%, rgba(248, 249, 255, 1) 100%);
        }

        .stock-detail-sum-content {
            color: #9093A0;
            margin-top: 0.06rem;
            line-height: 0.44rem;
        }

        .stock-detail-yh {
            color: rgb(240, 239, 242);
            right: 0.32rem;
            bottom: -0.2rem
        }


        .stock-detail-recommend {
            padding: 0.56rem 0.32rem 0 0.32rem
        }

        .stock-detail-sort {
            color: white;
            height: 0.36rem;
            width: 0.36rem;
            border-radius: 10rem;
            background-color: rgb(89, 109, 168);
        }

        .stock-detail-sort img {
            height: 0.36rem;
            width: 0.36rem;
        }

        .stock-detail-recommend-content {
            line-height: 0.42rem;
        }

        .stock-detail-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 10.5rem;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .stock-detail-wrap {
            background: rgba(255, 255, 255, 1);
        }

        .stock-detail-item {
            padding: 0 0.32rem;
        }

        .stock-detail-date {
            color: #222222;
            padding-top: 0.24rem;
        }

        .stock-detail-content {
            padding: 0.28rem 0;
            border-bottom: 1px solid #f6f6f6;
        }

        .stock-detail-listen {
            height: 0.6rem;
            width: 0.6rem;
            line-height: 0.7rem;
        }

        .stock-detail-title {
            color: #222222;
            line-height: 0.4rem;
        }

        .stock-detail-label {
            margin-top: 0.16rem;
            color: rgba(34, 34, 34, 0.45)
        }


        .stock-detail-bar {
            width: 0.04rem;
            background-color: #FF9523;
            margin-left: 0.04rem
        }

        .stock-detail-set {
            position: fixed;
            bottom: 0;
            width: 100%;
            opacity: 0.6;
            height: 100rem;
            background-color: black;
            z-index: 10005;
        }

        .stock-detail-pop {
            position: fixed;
            bottom: 0;
            width: 7.5rem;
            z-index: 10006;
            max-height: 10rem;
            background-color: white;
            border-radius: 0.16rem 0.16rem 0 0;
            padding-top: 0.26rem;
            /*padding-bottom: 0.98rem;*/
        }

        .stock-detail-play {
            width: 100%;
            padding: 0 0.36rem 0.2rem 0.36rem;
            border-bottom: 1px solid #f6f6f6;
        }

        .stock-detail-play :nth-child(2) {
            margin-left: 0.14rem;
        }

        .stock-detail-close {
            background-color: white;
            height: 0.98rem;
            width: 100%;
            line-height: 0.98rem;
            text-align: center;
            color: #222222;
            border-top: 1px solid #F2F2F2;
        }

        .stock-detail-bottom {
            width: 7.5rem;
            background-color: white;
            bottom: 0;
            height: 0.98rem;
            border-top: 1px solid #F2F2F2;
        }

        .stock-detail-tab {
            padding: 0 0.96rem;
            height: 100%;
        }

        .stock-detail-btn {
            height: 100%;
            width: 1rem;
            line-height: 1rem;
        }

        .stock-detail-dz {
            color: #2C68FF;
        }

    </style>
</head>
<body>

<div class="flex-column bg-white ff400">
    <!--状态栏-->
    <div class="placeholder-top pos-f pos-a">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar" style="color: #FFFFFF;" onclick="dealShare()">
                <span class="iconfont iconfenxiang1 fs16"></span>
            </div>
        </div>
    </div>

    <div class="stock-detail-head pos-r">
        <div class="stock-detail-img"><img src="../../images/home/home-detail-jrgs.png"></div>
        <div class="stock-detail-jrgs pos-a" style=""><img style="width: 3.16rem;height:3.16rem;" src="../../images/home/home-detail-jrgs.png"/></div>
        <div class="stock-detail-bg pos-a"></div>
        <div class="flex-column  pos-a" style="top:1.76rem;width:100%;">
            <div class="flex-row justify-content-center">
                <div class="stock-detail-center fs16 ta-center"></div>
            </div>
        </div>
    </div>

    <div class="flex-column pb90">
        <div class="stock-detail-sum pos-r">
            <div class="fs18">
                <img class="stock-detail-icon" src="../../images/home/abstract.png">
            </div>
            <div class="stock-detail-sum-content fspx16">今日播报覆盖热点行业：电气设备、电子、计算机、电子、计算机。</div>
            <span class="stock-detail-yh pos-a iconfont iconshuangyinhaoyou fs28"></span>
        </div>

        <div class="stock-detail-recommend flex-row">
            <div class="stock-detail-sort flex-row justify-content-center align-items-center mt5">
                <img src="../../images/home/number1.png"/>
            </div>
            <div class="flex-column flex-1 ml12 c-222">
                <div class="fs16 ff600">电气设备</div>
                <div class="stock-detail-recommend-content fspx15 mt5">东方日升:全球渠道布局，积极布局前沿技术</div>
            </div>
        </div>

        <div class="stock-detail-recommend flex-row">
            <div class="stock-detail-sort flex-row justify-content-center align-items-center mt5">
                <img src="../../images/home/number2.png"/>
            </div>
            <div class="flex-column flex-1 ml12 c-222">
                <div class="fs16 ff600">电子</div>
                <div class="stock-detail-recommend-content fspx15 mt5">欣旺达:与日产签署备忘录，具备全产业链优势</div>
            </div>
        </div>
        <div class="stock-detail-recommend flex-row">
            <div class="stock-detail-sort flex-row justify-content-center align-items-center mt5">
                <img src="../../images/home/number3.png"/>
            </div>
            <div class="flex-column flex-1 ml12 c-222">
                <div class="fs16 ff600">计算机</div>
                <div class="stock-detail-recommend-content fspx15 mt5">紫光股份:股东减持17%股权，引入战投，保持市场领先性</div>
            </div>
        </div>
    </div>
    <div class="stock-detail-bottom pos-f">
        <div class="stock-detail-tab flex-row justify-content-between align-items-center fs20">
            <div class="stock-detail-btn  ta-left" onclick="audioShow(1)">
                <span class="iconfont iconliebiao"></span>
            </div>

            <div class="stock-detail-btn ta-center">
                <span class="iconfont iconwengao-01" style="color: #2C68FF"></span>
            </div>
            <div class="stock-detail-btn ta-right" onclick="thumbsUp()">
                <span class="iconfont icondianzan"></span>
            </div>
        </div>
    </div>

    <div class="stock-detail-set stock-detail-window" style="display:none;" onclick="audioShow(2)"></div>
    <div class="stock-detail-pop stock-detail-window" style="display:none;">
        <div class="stock-detail-play flex-row align-items-center">
            <span class="iconfont iconliebiao fs15 mt3" style="color:#8D8D8D;"></span>
            <span class="fs15 c-222">播放列表</span>
        </div>
        <div class="stock-detail-list scoll-area flex-column scoll-y flex-1" style="max-height: 8rem">

        </div>
        <div class="stock-detail-close fs16" onclick="audioShow(2)">关闭</div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/touchRefresh.js"></script>
<script src="../../js/template.js"></script>
<script>
  let pm = {
    pageNum: 1,
    pageSize: 10,
    isScroll: true,
    title: '',
    isThumb: 0,
    datasource: 1
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    pm.infoId = params.infoId
    pm.infoType = params.infoType
    getStockDetail()
    getStockList()
    queryThumbStauts() // 查看点赞状态
    Template.pageScrollDiv(getStockList)
    pageScroll()

  }

  function reLoadPage() {

  }

  // 获取音频详情
  function getStockDetail() {
    Server.stockDetail.getStockDetailById({
      voiceId: pm.infoId,
    }).then(function (data) {
      pm.title = data.data.title
      $('.stock-detail-center').html(pm.title)
    })
  }

  function getStockList() {
    Server.stockDetail.getStockList({
      pageNum: pm.pageNum,
      pageSize: pm.pageSize,
      funcCode: '100001001'
    }).then(function (data) {
      let htmlStr = ''
      if (data.data && data.data.length > 0) {
        data.data.forEach(function (item) {
          htmlStr += '<div class=\'stock-detail-item\'>'
          htmlStr += '<div class=\'stock-detail-content flex-column\'>'
          htmlStr += '<div class=\'flex-row\'>'
          htmlStr += '<div class=\'stock-detail-listen\'>'
          htmlStr += '<span class=\'iconfont iconerji fs20 c-222\'></span>'
          htmlStr += '</div>'
          let jsonStr = JSON.stringify({
            infoId: item.voiceId,
            infoType: item.infoType,
          })
          htmlStr += '<div class=\'flex-column flex-1 ml15\' onclick=\'goDetail(' + jsonStr + ')\' >'
          htmlStr += '<div class=\'stock-detail-title line2 fs15\'>' + item.title + '</div>'
          htmlStr += '<div class=\'stock-detail-label flex-row fs11 justify-content-between align-items-center\'>'
          htmlStr += '<div class=\'flex-row align-items-center \'>'
          htmlStr += '<div>时长 ' + DateUtils.s2Str(item.voiceDuration) + '</div>'
          htmlStr += '<div class=\'ml22\'>' + item.readCnt + '人听过</div>'
          htmlStr += '</div>'
          htmlStr += '<div class=\'stock-detail-line flex-row align-items-center\' style=\'display: none\'>'
          htmlStr += '<div class=\'stock-detail-bar\' style=\'height:0.18rem;\'></div>'
          htmlStr += '<div class=\'stock-detail-bar\' style=\'height:0.22rem;\'></div>'
          htmlStr += '<div class=\'stock-detail-bar\' style=\'height:0.18rem;\'></div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
        })
      }
      if (pm.pageNum === 1) {
        $('.stock-detail-list').html(htmlStr)
      } else {
        $('.stock-detail-list').append(htmlStr)
      }
      if (data.data && data.data.length > 0) {
        pm.isScroll = true
      } else {
        $('.more').html('暂无更多数据')
        pm.isScroll = false
      }
    })
  }


  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    //需要特殊处理的滚动区域，需要放在scroller元素区域内
    $(window).on('scroll', function () {
      let scrollTop = $(this).scrollTop()
      dealHead(scrollTop)
    })
  }

  // 点击列表的播放
  function listenStart(o) {
    $(o).parent().find('.stock-detail-line').show()

  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(255, 255, 255)'
      })
      $('.right-bar').css({
        'color': 'rgb(255, 255, 255)'
      })
    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
      $('.right-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })
  }

  function audioShow(val) {
    if (1 === val) {
      $('.stock-detail-window').show()
    } else {
      $('.stock-detail-window').hide()
    }
  }

  // 点赞操作
  function thumbsUp() {
    if (pm.isThumb === 1) { // 如果是取消点赞
      pm.isThumb = 0
      $('.icondianzan').removeClass('stock-detail-dz')
    } else {// 如果是点赞
      pm.isThumb = 1
      $('.icondianzan').addClass('stock-detail-dz')
    }
    Server.stockDetail.updateThumbsupInfo({
      thumbupObjectId: pm.infoId,
      objectSource: pm.infoType,
      datasource: pm.datasource, // 1、ios 2、安卓
      status: pm.isThumb
    }).then(function (data) {
      if (data.code === 0) {
        jsBridge.callBridge('toast', {msg: (pm.isThumb === 1 ? '点赞成功' : '取消点赞成功')})
      }
    })
  }

  //查看点赞状态
  function queryThumbStauts() {
    Server.stockDetail.queryThumbStauts({
      thumbupObjectId: pm.infoId,
      status: 1,
    }).then(function (data) {
      if (data.isThumb > 0) {
        pm.isThumb = 1
        $('.icondianzan').addClass('stock-detail-dz')
      }
    })
  }


  function dealShare() {
    let item = {
      title: 'title',
      content: 'content',
      url: dict.SHARE_HOST + 'app/common/index.html#/index?id=' + pm.infoId + '&type=' + pm.infoType + '&version=' + dict.version,
      image: 'image',
      type: 'url'
    }
    Template.shareWindow(item)
  }
</script>
</html>
